<template>
  <div class="page">
    <SearchHeader />
    <div class="searchlist"></div>
   <router-link 
            tag="div"
            :to="'/detail/'+item.sequence"
            class="searchlist-goodsItem" v-for="(item) in list" :key="item.sequence">
          <div class="goodsPic">
                <img class="tu" v-lazy="item.avatar"/>
            </div>
                
            <div class="goodsDes">
               <div class="title">{{item.title}}</div>
            <div class="time">{{item.showTime}}</div>
            <div class="site">{{item.siteName}}</div>
            <div class="type">{{item.styles[0]}}</div>
            <div class="price">{{item.activityPrice}}</div>
            </div>
           
        </router-link>

 
  </div>
</template>

<script>
import SearchHeader from "../search/header.vue";
import {searchList} from "../search/index.js"
export default {
  data() {
    return {
      list: [],
    };
  },
  name: "searchList",
 props:["keyword"],
  components: {
    SearchHeader
  },
  
 watch: {
        keyword:{ 
           async handler(newVal){
               let data = await searchList(newVal);
               console.log(data.result.activityList)
                this.list=data.result.activityList;
            },
            immediate:true
        }
    },  
};
</script>

<style>
.searchlist{
    padding-top: .4rem
}
.searchlist-goodsItem{
    padding:.2rem;
    background: #fff;
    display: flex;
    align-items: center;

    position:relative;
}
.searchlist-goodsItem .goodsPic,.searchlist-goodsItem .goodsPic img{
    width:2.14rem;
    height: 2.86rem;
    flex-shrink: 0;
    border-radius:5px; 
}
.searchlist-goodsItem .goodsPic{
    margin-right: .2rem;
}
.goodsDes{
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}
.goodsDes>div:nth-child(1){
     font-size: 16px;
    line-height: 20px
}
.goodsDes>div:nth-child(2){
      margin-top: 10px;
    font-size: 11px;
    color: #aaa
}

.goodsDes>div:nth-child(3){
    font-size: 11px;
    color: #aaa
}
.goodsDes>div:nth-child(4){
    display: flex;
    margin-top: .2rem;
}
.type{
   width: 1.2rem;
    height: .4rem;
    background-color: #f8f8f8;
    border-radius:50px;
    font-size: 10px;
    line-height: .4rem;
    padding: 0 10px;
    margin: 5px 5px 0 0; 
    color: #bbb
}
.price{
    font-size: 16px;
    margin-top: .2rem
}
</style>